<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Test Textbox Validation Widgets</title>

	<script type="text/javascript">
		var djConfig = {
			isDebug: true, extraLocale: ['de-de', 'en-us']
		};
	</script>
	<script type="text/javascript" src="../../dojo.js"></script>
	<script type="text/javascript">
		dojo.require("dojo.widget.*");
	</script>

	<style>
	body {
		padding: 1em;
	}
	.formQuestion {
		background-color:#d0e3f5;
		padding:0.3em;
		font-weight:900;
		font-family:Verdana, Arial, sans-serif;
		font-size:0.8em;
		color:#5a5a5a;
	}
	.formAnswer {
		background-color:#f5eede;
		padding:0.3em;
		margin-bottom:1em;
	}
	.pageSubContentTitle {
			color:#8e8e8e;
			font-size:1em;
			font-family:Verdana, Arial, sans-serif;
			margin-bottom:0.75em;
	}
	.small {
		width: 2.5em;
	}
	.medium {
		width: 10em;
	}
	.long {
		width: 20em;
	}

	span.invalid, span.missing {
		display: inline;
		margin-left: 1em;
		font-weight: bold;
		font-style: italic;
		font-family: Arial, Verdana, sans-serif;
		color: #f66;
		font-size: 0.9em;
	}

	.errorMessage {
		font-weight:bold;
		font-family:Arial, Verdana, sans-serif;
		color:#ff0000;
		font-size:0.9em;
	}
	.warningMessage {
		font-weight:bold;
		font-family:Arial, Verdana, sans-serif;
		color:#ff9900;
		font-size:0.9em;
	}
	.noticeMessage {
		font-weight: normal;
		font-family:Arial, Verdana, sans-serif;
		color:#663;
		font-size:0.9em;
	}
	.myValidateColorValid {
		background-color: #FF0000;
	}
	.myValidateColorInvalid {
		background-color: #00FF00;
	}
	.myValidateColorEmpty {
		background-color: #0000FF;
	}
	</style>
</head>

	<body >
		<h2 class="pageSubContentTitle">Test Textbox Validation Widgets</h2>
		<form  method="get" id="form1" action="">

			<div class="formQuestion">
				<span class="emphasise">First Name:  </span>
				<span class="noticeMessage"> Textbox class, Attributes: {trim: true, ucFirst: true, class: 'medium'}, First letter of each word is upper case.</span>
			</div>
			<div class="formAnswer">
				<input id="q1" type="text" name="firstname" value="testing testing" class="medium"
					dojoType="Textbox"
					trim="true" 
					ucfirst="true" />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Last Name:  </span>
				<span class="noticeMessage"> Textbox class, Attributes: {trim: true, uppercase: true, class: 'medium'}, all letters converted to upper case. </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="lastname" value="testing testing" class="medium"
					dojoType="Textbox"
					trim="true" 
					uppercase="true" />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Age:  </span>
				<span class="noticeMessage"> Textbox class, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted. </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="age" value="38" class="small"
					dojoType="Textbox"
					trim="true" 
					digit="true" />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Occupation:  </span>
				<span class="noticeMessage">ValidationTextbox class, 
					Attributes: {lowercase: true, required: true}. Displays message if field is missing. </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="occupation" class="medium"
					dojoType="ValidationTextbox"
					lowercase="true" 
					required="true" 
					missingMessage="* The occupation is required." />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Elevation:  </span>
				<span class="noticeMessage">IntegerTextbox class, 
					Attributes: {trim: true, required: true, signed: true classPrefix: "myValidateColor"}, Enter feet above sea level with a sign. (note: these colors are drastically different due to demonstrating the effects of classPrefix.)</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="elevation" class="medium" value="300"
					dojoType="IntegerTextbox"
					trim="true"
					classPrefix="myValidateColor"
					required="true" 
					signed="true" 
					invalidMessage="Invalid elevation.  Be sure to use a plus or minus sign." />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Population:  </span>
				<span class="noticeMessage">IntegerTextbox class, 
					Attributes: {trim: true, required: true, signed: false, separator: ","}. <br><b> This widget was added in script, not markup. </b> </span>
			</div>
			<div class="formAnswer" >
				<input id="attach-here" type="text" name="population" class="medium" value="1500000"/>
			</div>

<script>
	// See if we can make a widget in script and attach it to the DOM ourselves.

	var name = "IntegerTextbox";
	var props = {
		name: "population",
		value: "1,500,000",
		trim: "true",
		required: "true",
		signed: "false",
		separator: ",",
		invalidMessage: "Invalid population.  Be sure to use commas."
	};
	var refNode = document.getElementById("attach-here");

	var w = dojo.widget.createWidget(name, props, refNode);
</script>

			<div class="formQuestion">
				<span class="emphasise">Real Number:  </span>
				<span class="noticeMessage">RealNumberTextbox class, 
					Attributes: {trim: true, required: true}. Enter any sort of real number.</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="real1" class="medium" value="+0.1234"
					dojoType="RealNumberTextbox"
					trim="true" 
					required="true" 
					invalidMessage="This is not a valid real number." />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Exponential Notation:  </span>
				<span class="noticeMessage">RealNumberTextbox class, 
					Attributes: {exponent: true}. Enter a real number in exponential notation.</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="real2" class="medium" value="+0.12"
					dojoType="RealNumberTextbox"
					trim="true" 
					required="true" 
					exponent = "true"
					invalidMessage="Number must be in exponential notation. Example +5E-28" />
			</div>

			<div class="formQuestion">
				<span class="emphasise">Annual Income:  </span>
				<span class="noticeMessage">CurrencyTextbox class, 
					Attributes: {fractional: true}. Enter dollars and cents.</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="income" class="medium" value="$54,775.53"
					dojoType="CurrencyTextbox"
					trim="true" 
					required="true" 
					fractional = "true"
					invalidMessage="Invalid amount.  Include dollar sign, commas, and cents. Example: $12,000.00" />
			</div>

			<div class="formQuestion">
				<span class="emphasise">IPv4 Address:  </span>
				<span class="noticeMessage">IpAddressTextbox class, 
					Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="ipv4" class="medium" value="24.17.155.40"
					dojoType="IpAddressTextbox"
					trim="true" 
					required="true" 
					allowIPv6 = "false"
					allowHybrid = "false"
					invalidMessage="Invalid IPv4 address." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> IPv6 Address:  </span>
				<span class="noticeMessage">IpAddressTextbox class, 
					Attributes: {allowDottedDecimal: false, allowDottedHex: false}. 
					Also hybrid works, x:x:x:x:x:x:d.d.d.d</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000"
					dojoType="IpAddressTextbox"
					trim="true" 
					uppercase = "true" 
					required="true" 
					allowDottedDecimal = "false"
					allowDottedHex = "false"
					allowDottedOctal = "false"
					invalidMessage="Invalid IPv6 address, please enter eight groups of four hexadecimal digits. x:x:x:x:x:x:x:x" />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> URL:  </span>
				<span class="noticeMessage">UrlTextbox class, 
					Attributes: {required: true, trim: true, scheme: true}. </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3"
					dojoType="UrlTextbox"
					trim="true" 
					required="true" 
					scheme = "true"
					invalidMessage="Invalid URL.  Be sure to include the scheme, http://..." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> Email Address  </span>
				<span class="noticeMessage">EmailTextbox class, 
					Attributes: {required: true, trim: true}. </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="email" class="long" value="fred&barney@stonehenge.com"
					dojoType="EmailTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid Email Address." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> Email Address List </span>
				<span class="noticeMessage">EmailListTextbox class, 
					Attributes: {required: true, trim: true}. </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; "
					dojoType="EmailListTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid Email Address List." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> Date (American format) </span>
				<span class="noticeMessage">DateTextbox class, 
					Attributes: {lang: "en-us", required: true, trim: true}. Works for leap years</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="date1" class="medium" value="12/30/05" lang="en-us"
					dojoType="DateTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid date. Use M/d/yy format." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> Date (German format) </span>
				<span class="noticeMessage">DateTextbox class, 
					Attributes: {formatLength:"medium", lang: "de-de", required: true, trim: true}. Works for leap years</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="date2" class="medium" value="30.12.2005" lang="de-de" formatLength="medium"
					dojoType="DateTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid date. Use dd.MM.yyyy format." />
			</div>


			<div class="formQuestion">
				<span class="emphasise"> Date (European format) using format (deprecated in 0.5) </span>
				<span class="noticeMessage">DateTextbox class, 
					Attributes: {format:"YYYY.MM.DD", required: true, trim: true}. Works for leap years</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="date2" class="medium" value="2005.12.30"
					dojoType="DateTextbox"
					trim="true" 
					required="true" 
					format = "YYYY.MM.DD"
					invalidMessage="Invalid date. Use YYYY.MM.DD format." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> 12 Hour Time </span>
				<span class="noticeMessage">TimeTextbox class, 
					Attributes: {formatLength: "medium", required: true, trim: true}</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="time1" class="medium" value="5:45:00 pm" formatLength="medium"
					dojoType="TimeTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid time." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> 24 Hour Time</span>
				<span class="noticeMessage">TimeTextbox class, 
					Attributes: {displayFormat:"HH:mm:ss", required: true, trim: true}</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="time2" class="medium" value="17:45:00"
					dojoType="TimeTextbox"
					trim="true" 
					required="true" 
					format = "HH:mm:ss"
					invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> 24 Hour Time using format attribute (deprecated in 0.5)</span>
				<span class="noticeMessage">TimeTextbox class, 
					Attributes: {format:"HH:mm:ss", required: true, trim: true}</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="time2" class="medium" value="17:45:00"
					dojoType="TimeTextbox"
					trim="true" 
					required="true" 
					format = "HH:mm:ss"
					invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> US State 2 letter abbr. </span>
				<span class="noticeMessage">UsStateTextbox class, 
					Attributes: {required: true, trim: true, uppercase: true}</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="state" class="small" value="CA"
					dojoType="UsStateTextbox"
					allowTerritories = "false"
					trim="true" 
					uppercase="true" 
					required="true" 
					invalidMessage="Invalid US state abbr." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> US Zip Code </span>
				<span class="noticeMessage">UsZipTextbox class, 
					Attributes: {required: true, trim: true} Five digit Zip code or 5 + 4.</span>
			</div>
			<div class="formAnswer">
				<input type="text" name="zip" class="medium" value="98225-1649"
					dojoType="UsZipTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid US Zip Code." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> US Social Security Number </span>
				<span class="noticeMessage">UsSocialSecurityNumberTextbox class, 
					Attributes: {required: true, trim: true} </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="ssn" class="medium" value="123-45-6789"
					dojoType="UsSocialSecurityNumberTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid US Social Security Number." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> 10-digit US Phone Number </span>
				<span class="noticeMessage">UsPhoneNumberTextbox class, 
					Attributes: {required: true, trim: true} </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="phone" class="medium" value="(123) 456-7890"
					dojoType="UsPhoneNumberTextbox"
					trim="true" 
					required="true" 
					invalidMessage="Invalid US Phone Number." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> Regular Expression </span>
				<span class="noticeMessage">RegexpTextbox class, 
					Attributes: {required: true, trim: true} </span>
			</div>
			<div class="formAnswer">
				<input type="text" name="phone" class="medium" value="someTestString"
					dojoType="RegexpTextbox"
                    regexp="^[\w]+$"
					required="true" 
                    invalidMessage="Invalid Non-Space Text." />
			</div>

			<div class="formQuestion">
				<span class="emphasise"> Password </span>
				<span class="noticeMessage">(just a test that type attribute is obeyed) </span>
			</div>
			<div class="formAnswer">
				<input type="password" name="password" class="medium"
					dojoType="Textbox" />
			</div>
<script>
	function displayData() {
		var f = document.getElementById("form1");
		var s = "";
		for (var i = 0; i < f.elements.length; i++) {
			var elem = f.elements[i];
			if (elem.name == "button")  { continue; }
			s += elem.name + ": " + elem.value + "\n";
		}
		alert(s);
	}
</script>

			<div><button name="button" onclick="displayData(); return false;">view data</button></div>

		</form>
	</body>
</html>

